<template>
	<view class="forget">

		<view class="t2" v-if="isActive==1">
			<view>
				<view><text>*</text>登录账号</view>
				<view class="t3"> <input   type="text" v-model="dataForm.username" placeholder="请输入登录账号"
						:placeholder-style='placeholderStyle' maxlength="20"></view>
			</view>
			<view>
				<view><text>*</text>新密码(长度6-20位,包含大小写字母、数字、特殊字符）</view>
				<view class="t3"> <input   type="password" v-model="dataForm.password" placeholder="请输入新密码"
						:placeholder-style='placeholderStyle' maxlength="20"></view>
			</view>
			<view>
				<view><text>*</text>确认密码</view>
				<view class="t3"> <input  type="password" v-model="newpassword" placeholder="请输入确认密码"
						:placeholder-style='placeholderStyle' maxlength="20"></view>
			</view>

			<view>
				<view><text>*</text>联系电话</view>
				<view class="t3"> <input   type="number" v-model="dataForm.mobile" placeholder="请输入联系电话"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>手机验证码</view>
				<view class="t3 t4"> <input   type="number" v-model="dataForm.code" maxlength="6" placeholder="请输入手机验证码"
						:placeholder-style='placeholderStyle'>
					<view class="codeBtn" @tap="getCode">{{tips}}</view>
				</view>
			</view>


			<view class="btn" @click="forgetPassword">
				找回并登录
			</view>

		</view>


		<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				tips: '获取验证码',
				// refCode: null,
				newpassword: '',
				seconds: 60,
				isActive: 1,
				imgUrl: this.imgUrl,
				placeholderStyle: 'font-size: 32upx;color: #999999;',
				dataForm: {
					"code": "",
					"mobile": "",
					"password": "",
					"username": ""
				}

			}
		},
		computed: {

		},
		onShow() {


		},
		methods: {
			forgetPassword() {
				var self = this;
				if (this.dataForm.password != this.newpassword) {
					uni.showToast({
						title: '密码不一致',
						icon: 'none'
					});
					return
				}
				this.$http
					.forgetPassword(this.dataForm)
					.then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						if (res.code == 0) {
							uni.setStorageSync('token', res.data.token)
							uni.setStorageSync('userType', res.data.type ||'')
							setTimeout(function() {
								
								self.goToTab('/pages/index/index')
							}, 1500)
						}




					})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				uni.showLoading({
					title: '正在获取验证码'
				})
				this.$http
					.apicode({
						mobile: this.dataForm.mobile
					})
					.then(res => {
						if (res.code == 0) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}

					})



			},


		}
	}
</script>



<style lang="scss" scoped>
	.forget {
		padding-bottom: 2upx;
		padding-top: 24upx;
	}

	.t1 {
		display: flex;
		justify-content: space-around;
		padding: 34upx;

		>view {
			display: flex;
			align-items: center;
		}

		image {
			width: 32upx;
			height: 32upx;
			margin-right: 10upx;
		}
	}

	.t2 {
		padding: 0 24upx;
		font-size: 28upx;

		text {
			color: #D43030;
		}

		>view {
			margin-bottom: 24upx;

			>view {
				margin-bottom: 24upx;
			}

			.t3 {
				background: #fff;
				width: 100%;
				height: 100upx;
				border-radius: 16upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				input {
					width: 100%;
					height: 100%;
					margin-left: 24upx;
				}

				.codeBtn {
					color: #3875f6;
					font-size: 32upx;
					word-wrap: break-word;
					margin-right: 24upx;
				}
			}

			.t4 {
				input {
					width: 50%;
				}
			}


		}

		.agree {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999999;
			font-size: 28upx;

			image {
				width: 32upx;
				height: 32upx;
				margin-right: 12upx;
			}

			text {
				color: #3875F6;
			}

		}

		.btn {
			width: 100%;
			height: 90upx;
			text-align: center;
			color: #ffffff;
			font-size: 32upx;
			line-height: 90upx;
			border-radius: 8px;
			background: #3875f6;
			margin: 48upx auto;
		}




	}
</style>
